import React from 'react';
import { Input, Button } from 'antd';
import { Form, Icon } from '@ant-design/compatible';
import { connect } from 'dva';
import tools from '../../utils';
import md5 from '../../utils/md5';
import css from './userLogin.css';
import { routerRedux } from 'dva/router';
import { setAuthority } from '../../utils/authority';
import { reloadAuthorized } from '../../utils/Authorized';
import { title, fullTitle, apiUrl } from '../../../config';

const reqApi = 'userLogin';

class page extends React.Component {
	state = {
		loading: false,
		name: '欢迎使用',
	};

	constructor(props) {
		super(props);
		document.title = '用户登录 - ' + title;
	}

	componentDidMount() {
	  if (location.search.length <= 1) return;

		const {dispatch} = this.props;
		dispatch({
			type: reqApi + '/before',
		}).then(() => {
			const {props} = this;
			const {beforeData} = props[reqApi];
			if (beforeData) {
				const {name, logo} = beforeData;
				this.setState({name});
				if (logo) {
					const url = apiUrl() + '/upload/' + logo;
					const dom = document.getElementById('favicon');
					if (dom) dom.href = url;
				}
			}
		});
	}

	// 处理登录表单提交
	funcSubmit = e => {
		e.preventDefault();

		const { form, dispatch } = this.props;
		form.validateFields((err, values) => {
			if (err) return;

			this.setState({ loading: true });

			const { userName, passwd } = values;

			const payload = {
				userName,
				passwd: md5.md5(passwd),
			};
			dispatch({
				type: reqApi + '/submit',
				payload,
			}).then(() => {
				const { props } = this;
				this.setState({ loading: false });
				const { data } = props[reqApi];
				if (data.success) this.funcSubmitOK(data);
			});
		});
	};

	// 管理员登录成功
	funcSubmitOK = (data) => {
		let { menuData, res } = data;

		// 可见菜单(页面)
		if (menuData) {
			menuData = menuData.map((item) => {
				const { id, pid, name, page, icon } = item;
				const newItem = { id, pid, name, page };
				if (icon) newItem.icon = icon;
				return newItem;
			});

			tools.funcSetLocalValue('menuData', JSON.stringify(menuData));
		}

		// 可用资源(功能)
		tools.funcSetLocalValue('resStr', res);

		tools.funcSetCookie('userName', data.userName);
		setAuthority(data);
		reloadAuthorized();
		const { props } = this;
		props.dispatch(routerRedux.replace('/')); // 进入后台管理系统
	};

	render() {
		const { state, props } = this;
		const { getFieldDecorator } = props.form;

		return (
			<div className={css.contentWrapper}>
				<h2 className={css.slogan}>
					<div>{state.name}</div>
					<div>{fullTitle}</div>
				</h2>

				<div className={css.formContainer}>
					<h4 className={css.formTitle}>登录</h4>
					<Form onSubmit={this.funcSubmit}>
						<Form.Item className={css.formItem}>
							{getFieldDecorator('userName', {
								rules: [{ required: true, message: '请输入您的用户名' }],
							})(
								<Input
									placeholder="用户名"
									maxLength={20}
									prefix={<Icon type="user" />}
									autoFocus
								/>
							)}
						</Form.Item>

						<Form.Item className={css.formItem}>
							{getFieldDecorator('passwd', {
								rules: [{ required: true, message: '请输入您的密码' }],
							})(
								<Input
									placeholder="密码"
									maxLength={20}
									type="password"
									prefix={<Icon type="lock" />}
								/>
							)}
						</Form.Item>

						<Form.Item className={css.formItem}>
							<Button
								block
								htmlType="submit"
								type="primary"
								className={css.submit}
								loading={state.loading}
							>
								立即登录
							</Button>
						</Form.Item>
					</Form>
				</div>
			</div>
		);
	}
}

const page2 = Form.create()(page);
export default connect(({ userLogin, menu }) => ({ userLogin, menu }))(page2);
